<template>
  <div class="login-wrapper">
    <div class="login-container">
      <div class="title-container">欢迎使用</div>
      <el-form
        status-icon
        size="large"
        :rules="Rules"
        ref="loginForm"
        @submit.prevent
        :model="formData"
      >
        <el-form-item prop="loginName">
          <el-input placeholder="请输入登录名" v-model="formData.loginName" clearable  :prefix-icon="Monitor"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input placeholder="请输入密码"  type="password" v-model="formData.password" clearable  :prefix-icon="Lock"></el-input>
        </el-form-item>
        <el-form-item prop="code">
          <el-input placeholder="请输入验证码" v-model="formData.code" clearable class="starCode" :prefix-icon="Picture"></el-input>
          <img :src="CodeData.codeImgUrl" @click="handleChangeCode" style="width:120px;height:40px">
        </el-form-item>
        <el-form-item>
          <el-button type="primary" native-type="submit" style="width:100%" @click="submitForm(loginForm)">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import router from '@/router'
import useStore from '@/store'
import { ElMessage } from 'element-plus'
import { CODE_KEY } from '@/config/constants'
import { onMounted, reactive, ref } from 'vue'
import { getRSAkey, getCode } from '@/api/common/auth/index'
import { Monitor, Lock, Picture } from '@element-plus/icons-vue'
import { LoginBean, Rules } from '@/model/common/login/LoginConstant'
import { getUserInfo } from '@/api/system/user/UserManager'

const loginForm = ref()
const publicKey = ref('')
const { userStore, menuStore } = useStore()
const formData = reactive({ ...LoginBean })
const CodeData = reactive({ codeImgUrl: '' })

const submitForm = async (loginForm) => {
  if (!loginForm) return
  loginForm.validate(valid => {
    if (valid) {
      userStore.login(formData, publicKey.value).then(() => {
        // menuStore.getMenuList()
        ElMessage({
          message: '登录成功!',
          type: 'success',
          duration: 800
        })
        // router.push({
        //   name: 'DashboardBase'
        // })
        // 使用name会去路由里查找路径，登录前动态路由并未加载DashboardBase
        router.push({ path: '/' })
      }).catch((error) => {
        ElMessage.error(error.message)
        handleChangeCode()
      })
    }
    return false
  })
}

const handleChangeCode = () => {
  getCode(formData.codeKey).then(data => {
    const { image, codeTag } = data
    CodeData.codeImgUrl = image
    formData.codeKey = codeTag
    localStorage.setItem(CODE_KEY, codeTag)
  })
}

onMounted(() => {
  getRSAkey().then(data => {
    publicKey.value = data
  })

  handleChangeCode()
})

</script>

<style lang="scss" scoped>
$bg: #4b5867;
$light_gray: #fff;
$cursor: #fff;
.login-wrapper {
    min-height: 100%;
    width: 100%;
    background-color: $bg;
    overflow: hidden;
    position: relative;
    .login-container{
        width: 350px;
        position: relative;
        padding: 260px 35px 0;
        margin: 0 auto;
        .starCode{
          width: calc(100% - 125px);
          margin-right: 5px;
        }
        .title-container{
            position: relative;
            font-size: 26px;
            color: #fff;
            font-weight: bold;
            margin: 0px auto 20px auto;
            text-align: center;
        }
    }
}
</style>
